React useFormStatus asynkron validering: Asynkrona uppdateringar av formulärstatus

I modern webbutveckling är formulär ett avgörande element för användarinteraktion. Att säkerställa datavaliditet och ge feedback i realtid är avgörande för en positiv användarupplevelse. Reacts useFormStatus hook, som introducerades i React 18, erbjuder ett kraftfullt och elegant sätt att hantera statusen för formulärinskickningar, särskilt när man hanterar asynkron validering. Denna artikel fördjupar sig i detaljerna kring useFormStatus, med fokus på asynkrona valideringsscenarier, ger praktiska exempel och beskriver bästa praxis för att skapa robusta och användarvänliga formulär.

Förstå grunderna i useFormStatus

useFormStatus-hooken ger information om den senaste formulärinskickningen som utlöstes av en eller inom ett <form>. Den returnerar ett objekt med följande egenskaper:

• pending: En boolean som indikerar om formulärinskickningen för närvarande väntar.
• data: Datan som är associerad med formulärinskickningen, om tillgänglig.
• method: HTTP-metoden som används för formulärinskickningen (t.ex. 'get' eller 'post').
• action: Funktionen som används som formulärets action.

Även om det kan verka enkelt blir useFormStatus otroligt värdefullt när man hanterar asynkrona operationer, som att validera användarinmatning mot en fjärrserver eller utföra komplexa datatransformationer före inskickning.

Behovet av asynkron validering

Traditionell synkron validering, där kontroller utförs omedelbart i webbläsaren, är ofta otillräcklig för verkliga applikationer. Tänk på dessa scenarier:

• Användarnamns tillgänglighet: Att verifiera om ett användarnamn redan är upptaget kräver en databasuppslagning.
• E-postverifiering: Att skicka ett verifieringsmejl och bekräfta dess giltighet kräver interaktion på serversidan.
• Betalningshantering: Att validera kreditkortsuppgifter innebär kommunikation med en betalningsgateway.
• Adressautofyll: Att föreslå adressalternativ medan användaren skriver kräver anrop till ett externt API.

Dessa scenarier involverar i sig asynkrona operationer. useFormStatus, i kombination med asynkrona funktioner, låter oss hantera dessa valideringar smidigt och ge omedelbar feedback till användaren utan att blockera användargränssnittet.

Implementera asynkron validering med useFormStatus

Låt oss utforska ett praktiskt exempel på att validera ett användarnamns tillgänglighet asynkront.

Exempel: Asynkron validering av användarnamn

Först skapar vi en enkel React-komponent med ett formulär och en submit-knapp.

            import React, { useState, useTransition } from 'react';
import { useFormStatus } from 'react-dom';

function UsernameForm() {
  const [username, setUsername] = useState('');
  const [isPending, startTransition] = useTransition();

  async function handleSubmit(formData) {
    "use server";
    const username = formData.get('username');

    // Simulate an API call to check username availability
    await new Promise(resolve => setTimeout(resolve, 1000)); // Simulate network latency

    const isAvailable = username !== 'taken'; // Mock availability check

    if (!isAvailable) {
      throw new Error('Username is already taken.');
    }

    console.log('Username is available!');
    // Perform actual form submission here
  }

  return (
    <form action={handleSubmit}>
      <label htmlFor="username">Username:</label>
      <input
        type="text"
        id="username"
        name="username"
        value={username}
        onChange={(e) => setUsername(e.target.value)}
      />
      <button type="submit" disabled={isPending}>
        {isPending ? 'Checking...' : 'Submit'}
      </button>
       <StatusComponent />
    </form>
  );
}

function StatusComponent() {
    const { pending, data, method, action } = useFormStatus();

    return (
        <p>
          {pending && "Submitting..."}
          {data && <pre>{JSON.stringify(data)}</pre>}
        </p>
    )
}

export default UsernameForm;

            

              

Copy